<script setup lang="ts">
import { $t } from '@/locales';

defineOptions({
  name: 'TaskSearch'
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<Api.Outbound.TaskSearchParams>('model', { required: true });

function reset() {
  emit('reset');
}

function search() {
  emit('search');
}

const statusOptions = [
  { label: '未开始', value: 0 },
  { label: '进行中', value: 1 },
  { label: '已结束', value: 2 },
  { label: '已暂停', value: 3 },
  { label: '工作时间暂停', value: 4 },
  { label: '禁呼状态', value: 5 },
  { label: '拨打完成', value: 6 },
  { label: '已终止', value: 7 }
];
</script>

<template>
  <NCard :title="$t('common.search')" :bordered="false" size="small" class="card-wrapper">
    <NForm :model="model" size="small" :label-width="80">
      <NGrid :cols="24" :x-gap="18">
        <NGridItem :span="6">
          <NFormItem label="任务名称" path="taskName">
            <NInput v-model:value="model.taskName" placeholder="请输入任务名称" />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="6">
          <NFormItem label="剧本名称" path="scriptName">
            <NInput v-model:value="model.scriptName" placeholder="请输入剧本名称" />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="6">
          <NFormItem label="火山任务ID" path="volcanoTaskId">
            <NInput v-model:value="model.volcanoTaskId" placeholder="请输入火山任务ID" />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="6">
          <NFormItem label="任务状态" path="status">
            <NSelect
              v-model:value="model.status"
              placeholder="请选择任务状态"
              :options="statusOptions"
              clearable
            />
          </NFormItem>
        </NGridItem>
        <NGridItem :span="24">
          <NSpace class="w-full justify-end">
            <NButton @click="reset">
              <template #icon>
                <icon-ic-round-refresh class="text-icon" />
              </template>
              {{ $t('common.reset') }}
            </NButton>
            <NButton type="primary" ghost @click="search">
              <template #icon>
                <icon-ic-round-search class="text-icon" />
              </template>
              {{ $t('common.search') }}
            </NButton>
          </NSpace>
        </NGridItem>
      </NGrid>
    </NForm>
  </NCard>
</template>

<style scoped></style>
